<template>
	<view class="content">
		<u--form
			
			labelPosition="left"
			labelWidth="100"
			:model="model"
			:rules="rules"
			ref="uForm"
		>
			<view class="content-form">
				<v-card class="content-examine">
					<view class="content-base">
						<u-form-item label="标题" prop="userInfo.name" borderBottom>
							<u--input v-model="model.userInfo.name" border="none">
							</u--input>
						</u-form-item>
						<u-form-item label="分类" prop="userInfo.sex" borderBottom @click="sheethClick">
							<u--input
								v-model="model.userInfo.sex"
								disabled
								disabledColor="#ffffff"
								placeholder="请选择"
								border="none"
							>
							</u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="人数上限" prop="userInfo.name" borderBottom>
							<u--input v-model="model.userInfo.name" border="none" placeholder="0为不限制">
							</u--input>
						</u-form-item>
						<u-form-item label="活动开始时间" prop="userInfo.ds" @click="pickerClick" borderBottom>
							<u--input
								v-model="model.userInfo.rq"
								disabled
								disabledColor="#ffffff"
								placeholder="请选择"
								border="none"
							>
							</u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="活动结束时间" prop="userInfo.ds" @click="pickerClick" borderBottom>
							<u--input
								v-model="model.userInfo.rq"
								disabled
								disabledColor="#ffffff"
								placeholder="请选择"
								border="none"
							>
							</u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="截止时间" prop="userInfo.ds" @click="pickerClick" borderBottom>
							<u--input
								v-model="model.userInfo.rq"
								disabled
								disabledColor="#ffffff"
								placeholder="请选择"
								border="none"
							>
							</u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="活动地点" prop="userInfo.ww" @click="pickerClick" >
							
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item prop="userInfo.ww">
							<u--textarea v-model="model.userInfo.ww" placeholder="请输入内容"></u--textarea>
						</u-form-item>
					</view>
				</v-card>
				<v-card class="content-examine">
					<view class="content-base">
						<u-form-item label="审核设置" prop="userInfo.sex" borderBottom @click="sheethClick">
							<u--input
								v-model="model.userInfo.re"
								disabled
								disabledColor="#ffffff"
								placeholder="请选择"
								border="none"
							>
							</u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="取消设置" prop="userInfo.sex" borderBottom @click="sheethClick">
							<u--input
								v-model="model.userInfo.re"
								disabled
								disabledColor="#ffffff"
								placeholder="请选择"
								border="none"
							>
							</u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
					</view>
				</v-card>
				<v-card class="content-examine">
					<view class="content-base">
						<u-form-item label="封面图片上传（必填）" prop="userInfo.ww" @click="pickerClick" >
							<u--input
								v-model="model.userInfo.rq"
								disabled
								disabledColor="#ffffff"
								placeholder="每张不超过10M"
								border="none"
							>
							</u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item prop="userInfo.ww">
							<v-upload></v-upload>
						</u-form-item>
						<u-form-item label="取消设置" prop="userInfo.sex" borderBottom @click="sheethClick">
							<u--input
								v-model="model.userInfo.re"
								disabled
								disabledColor="#ffffff"
								placeholder="请选择"
								border="none"
							>
							</u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="活动介绍（必填）" prop="userInfo.ww" @click="pickerClick" >
							<u--input
								v-model="model.userInfo.rq"
								disabled
								disabledColor="#ffffff"
								placeholder="每张不超过10M"
								border="none"
							>
							</u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
					</view>
				</v-card>
				<v-card class="content-examine">
					<view class="content-base">
						<u-form-item label="姓名" prop="userInfo.ww" >
							<u--input
								v-model="model.userInfo.rq"
								disabledColor="#ffffff"
								placeholder="请输入"
							>
							</u--input>
						</u-form-item>
						<u-form-item label="手机号" prop="userInfo.ww" >
							<u--input
								v-model="model.userInfo.rq"
								disabledColor="#ffffff"
								placeholder="请输入"
							>
							</u--input>
						</u-form-item>
					</view>
				</v-card>
				<view class="bottom-box">
					<u-button class="bottom-box" type="primary" text="确定"></u-button>
				</view>
			
			</view>
		</u--form>
		<u-action-sheet
			:show="sheetShow"
			:actions="actions"
			title="请选择"
			@close="sheethClick"
			@select="sheetSelect"
		>
		</u-action-sheet>
		<u-datetime-picker 
			v-model="model.userInfo.rq" 
			:show="pickerShow" 
			mode="datetime" 
			@close="pickerClick" 
			@confirm="pickerClick" 
			@cancel="pickerClick"
		>
		</u-datetime-picker>
	</view>
</template>

<script>

export default {
	props: {
		
	},
	data() {
		return {
			sheetShow: false,
			pickerShow: false,
			model: {
				userInfo: {
					name: '',
					sex: '',
					rq: '',
				},
			},
			actions: [
				{
					name: '饭搭',
				},
				{
					name: '旅游',
				},
				{
					name: '打麻将',
				},
			],
			rules: {
				'userInfo.name': {
					type: 'string',
					required: true,
					message: '请填写标题',
					trigger: ['blur', 'change']
				},
				'userInfo.sex': {
					type: 'string',
					required: true,
					message: '请选择分类',
					trigger: ['blur', 'change']
				},
			},
			radio: '',
			switchVal: false
		}
	},
	computed:{
	
	},
	methods: {
		sheethClick() {
			this.sheetShow = !this.sheetShow
		},
		pickerClick() {
			this.pickerShow = !this.pickerShow
		},
		sheetSelect(e) {
			this.model.userInfo.sex = e.name
			this.$refs.uForm.validateField('userInfo.sex')
		},
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    	this.$refs.uForm.setRules(this.rules)
    },
	onLoad() {
		
	},
}
</script>

<style lang="scss" scoped>
.content{
	padding-bottom: 150px;
	.content-form{
		display: flex;
		flex-direction: column;
	}
	.content-examine{
		margin-bottom: 10px;
		.content-base{
		
			.content-form{
			
			}
		}
	}
	

}
	
</style>
